大前端

3.2.6 JavaScript 缓存机制

web缓存的优势：

  • 1、 减少了网络延迟，加快了页面响应速度，增强了用户体验嘛；

  • 2、 减少了网络带宽消耗嘛；

  • 3、 通过缓存，我们都不用到服务器 （origin servers）去请求了，从而也就相应地减轻了服务器的压力。

浏览器缓存策略：

  • 浏览器会优先检查本地缓存
  • 然后是Etag，etag如果状态码是302，依然走本地
  • 实在不行，才走服务器

浏览器缓存机制有两种，

  • 一种为强缓存，
  • 一种为协商缓存。

对于强缓存，浏览器在第一次请求的时候，会直接下载资源，然后缓存在本地，第二次请求的时候，直接使用缓存。
对于协商缓存，第一次请求缓存且保存缓存标识与时间，重复请求向服务器发送缓存标识和最后缓存时间，服务端进行校验，如果失效则使用缓存。

  • 协商缓存方案

    • Exprires：服务端的响应头，第一次请求的时候，告诉客户端，该资源什么时候会过期。 Exprires的缺陷是必须保证服务端时间和客户端时间严格同步。
    • Cache-control：max-age，表示该资源多少时间后过期，解决了客户端和服务端时间必须同步的问题，
    • If-None-Match/ETag：缓存标识，一般使用 哈希，对比缓存时使用它来标识一个缓存， 第一次请求的时候，服务端会返回该标识给客户端，
      客户端在第二次请求的时候会带上该标识与服务端进行对比并返回 If-None-Match 标识是否表示匹配。
    • Last-modified/If-Modified-Since：第一次请求的时候服务端返回 Last-modified 表明请求的资源上次的修改时间，
      第二次请求的时候客户端带上请求头 If-Modified-Since，表示资源上次的修改时间，服务端拿到这两个字段进行对比。

  • 两者之间对比：

    • 首先在精确度上，Etag要优于Last-Modified。Last-Modified的时间单位是秒，如果某个文件在1秒内改变了多次，
      那么他们的 Last-Modified 其实并没有体现出来修改，但是Etag每次都会改变确保了精度；
      如果是负载均衡的服务器，各个服务器生成的 Last-Modified也有可能不一致。
    • 第二在性能上，Etag 要逊于 Last-Modified，毕竟 Last-Modified 只需要记录时间，而 Etag 需要服务器通过算法来计算出一个 hash 值。
    • 第三在优先级上，服务器校验优先考虑Etag

  • 在REST架构下，ETag值可以通过Guid、整数、长整形、字符串四种类型的参数传入SetETag方法，

  • 参考： ETag详解

参考

← 3.2.7 javascript 执行上下文 →